<template>
  <a-card>
    <!--搜索框-->
    <div class="table-page-search-wrapper">
      <a-form :form="form" layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="医院名称">
              <a-input v-decorator="['hospitalName', { initialValue: '', rules: [{required: false}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="城市">
              <a-input v-decorator="['city', { initialValue: '', rules: [{required: false}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="状态">
              <a-select mode="multiple" v-decorator="['status', { initialValue: [], rules: [{required: false}] }]" >
                <a-select-option value="0">未审核</a-select-option>
                <a-select-option value="1">已作废</a-select-option>
                <a-select-option value="2">已审核</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider></a-divider>
    <a-table
      ref="table"
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="modifyRequests"
      :pagination="pagination"
      :loading="loading"
    >
      <template slot="id" slot-scope="id">
        # {{ id }}
      </template>
      <template slot="status" slot-scope="status">
        <a-tag color="blue" v-if="status==0">未审核</a-tag>
        <a-tag color="red" v-if="status==1">已作废</a-tag>
        <a-tag color="green" v-if="status==2">已审核</a-tag>
      </template>
      <template slot="hospitalName" slot-scope="operation, record">
        <a @click="handleDetail(record)">{{ record.hospitalName }}</a>
      </template>
    </a-table>
    <modify-request-detail ref="ModifyRequestDetail" @onclosed="handleSearch" />
  </a-card>
</template>

<script>
import { getModifyRequests } from '@/api/modify-request'
import Notification from '@/utils/notification'
import ModifyRequestDetail from './ModifyRequestDetail'

const columns = [
  {
    title: '城市',
    dataIndex: 'city',
    width: '80px',
    scopedSlots: { customRender: 'city' }
  },
  {
    title: '医院名称',
    dataIndex: 'hospitalName',
    width: '300px',
    scopedSlots: { customRender: 'hospitalName' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '300px',
    scopedSlots: { customRender: 'status' }
  }
]

export default {
  name: 'ModifyRequestList',
  components: {
    ModifyRequestDetail
  },
  data () {
    return {
      queryParam: {},
      columns: columns,
      pagination: {},
      loading: false,
      modifyRequests: [],
      form: this.$form.createForm(this),
      notification: new Notification(this.$notification)
    }
  },
  created () {},
  mounted () {
    this.handleSearch()
  },
  methods: {
    fetchData (params = {}) {
      console.log('params:', params)
      // var getParams = params
      // getParams.status = JSON.stringify(params.status)
      var promise = getModifyRequests(params)
      this.loading = true
      promise.then(response => {
        console.log('fetchData:', response)
        this.pagination = response.pagination
        this.modifyRequests = response.data
        this.loading = false
      }).catch(context => {
        this.loading = false
        this.notification.httpError(`加载申请列表数据！`, context.response)
      })
    },
    handleSearch () {
      this.form.validateFields((err, values) => {
        console.log('err', err)
        console.log('values', values)
        this.fetchData(values)
      })
    },
    handleDetail (record) {
      this.$refs.ModifyRequestDetail.openDrawer(record.id)
    }
  }
}

</script>
